<template>
    <div>
        <label>地址：</label>
        <input :value="field.value" @input="onChange" @blur="field.onBlur" />
        <div v-if="error" style="color: red">{{ error }}</div>
        <!-- <div v-for="item in pickFields" :key="item.fieldName">aa: {{ item.fieldName }}</div> -->
    </div>
</template>
<script>
import {defineComponent, computed} from 'vue';
import {useField, useFormInject} from '../src/hooks';

export default defineComponent({
    props: {
        name: String,
        type: String,
        path: String,
        idx: String,
        showIndex: Number,
        validators: [Function, Array],
        extensions: String,
        reactions: String,
        spec: Object,
        display: String,
        readonly: Boolean,
        diabled: Boolean,
        validating: Boolean,
        modified: Boolean,
        initialValue: String,
        value: String,
        isLeaf: Boolean
    },
    setup(props) {
        const {field, helper} = useField(props);
        const form = useFormInject();
        const error = computed(() => form.errors[props.path]);
        const onChange = (value) => {
            helper.setValue(value.target.value);
        };
        return {
            field,
            error,
            onChange
        };
    }
});
</script>
